<script setup lang="ts">
// const input = ref<string>("2025-05-20"); // 选择的日期

const attrs = useAttrs();
const keys = Object.keys(attrs);

const input = defineModel<string | undefined>(); // 选择的日期

import { date } from "quasar";

// const clearable = ref(keys.includes("clearable"));
const landscape = ref(keys.includes("landscape")); // 是否横屏
const minimal = ref(keys.includes("minimal") && attrs.minimal == false ? false : true); // 是否最小化

const datecolor = ref(keys.includes("datecolor") ? (attrs.datecolor as string) : "primary"); // 日期颜色

const options = keys.includes("options") ? (typeof attrs.options === "function" ? attrs.options() : attrs.options) : undefined;

const show = ref(false); // 是否显示日期选择器

const showdate = () => {
  if (!show.value) {
    show.value = true;
  }
};

const q_input = ref<string>(""); // 选择的日期

// watch(input, val => {
//   if (val) {
//     q_input.value = date.isValid(val) ? date.formatDate(val, "YYYY-MM-DD") : val;
//   } else {
//     q_input.value = "";
//   }
// });

watch(q_input, val => {
  if (date.isValid(val)) {
    input.value = date.formatDate(val, "YYYY-MM-DD");
  } else {
    input.value = val;
  }
  // input.value = val;
});
</script>
<template>
  <q-input
    v-bind="$attrs"
    mask="####-##-##"
    lazy-rules
    v-model="input"
    @click="showdate"
    :rules="[val => !val || (val.length === 10 && date.isValid(val)) || '日期格式不正确']"
  >
    <template v-slot:append>
      <q-icon
        name="event"
        class="cursor-pointer q-mt-sm"
        size="xs"
      >
        <q-popup-proxy
          v-model="show"
          :breakpoint="1000"
        >
          <div>
            <q-date
              v-model="q_input"
              :landscape="landscape"
              :minimal="minimal"
              :color="datecolor"
              :options="options"
            />
          </div>
        </q-popup-proxy>
      </q-icon>
    </template>
  </q-input>
</template>

<style scoped lang="scss"></style>
